<template>
  <div class="informationContent" id="informationContent">
    <!-- 消息模板的tab切换 -->
    <baseTabs @changeTabs="changeTopTabs" :activeKey="reqTelListOption.tplType" :tabsList="tabsList" v-slot="{ item }">
      <template v-if="showSamePageBtn">
        <a-button @click="showModel" type="primary" :disabled="!btnPerm.includes('syncAble')" >同步模版到子站</a-button>
        <a-tooltip placement="right">
          <template #title>
            <span>同步到子站会将当前站点的消息模版数据同步到所选子站点，并删除子站原有消息模版</span>
          </template>
          <i class="iconfont icon-hint1" style="font-size: 16px; margin-left: 8px">
          </i>
        </a-tooltip>
      </template>
    </baseTabs>
    <!-- 消息模板的table表格 -->
    <baseTable :columns="columns.messageColumns" :dataSource="configData.records" :isShowPagination="isShowPagination"
      :total="configData.total" :rowSelection="1" @changePage="changePage" :isSelect="true" :scroll="scroll">
      <template #bodyCell="{ column, text, record }">
        <template v-if="column.ellipsis">
          <table-tool-tip :text="text" :column="column"></table-tool-tip>
        </template>
        <template v-if="column.dataIndex === 'openSms'">
          <a-switch @click="switchChange(record, 3)" size="small" v-model:checked="record.openSms" />
        </template>
        <template v-if="column.dataIndex === 'openEmail'">
          <a-switch @click="switchChange(record, 2)" size="small" v-model:checked="record.openEmail" />
        </template>
        <template v-if="column.dataIndex === 'openLetter'">
          <a-switch @click="switchChange(record, 1)" size="small" v-model:checked="record.openLetter" />
        </template>
        <template v-if="column.dataIndex === 'oparation'">
          <a :class="{ disable: !btnPerm.includes('editAble') }" @click="showText(record)">{{ record.oparation }}</a>
        </template>
      </template>
    </baseTable>
  </div>
  <!-- 消息模板的对话框组件 -->
  <baseModal :width="modAlProps.width" :isVisible="isVisible" :title="modAlProps.title" :selectable="selectable"
    :buttons="buttons" @handleOk="buttonMessage" @handleCancle="handleCancle">
    <template v-slot:body>
      <!-- 同步子站弹窗 -->
      <div v-show="!isEdit && !isShowMsgModel">
        <div class="model-tips">
          <i class="iconfont icon-hint" style="font-size: 20px"> </i>
          <span class="tips-text">同步到子站会将当前站点的消息模版数据同步到所选子站点，并删除子站原有消息模版</span>
        </div>
        <div class="select-text">选择站点:</div>
        <base-tree :treeData="treeData" :fieldNames="fieldNames" :checkedKeys="selectedOrgKeys" :selectable="false"
          :checkStrictly="checkStrictly" @checked_Keys="checked_Keys"></base-tree>
      </div>
      <!-- 编辑弹窗 -->
      <div v-show="isEdit && !isShowMsgModel" class="edit-body">
        <a-form ref="messageFrom" autoComplete="off" :model="detailData" name="validate_other">
          <a-form-item name="mesTitle" :label="formOptions.templatenameOpt.label"
            :rules="[formOptions.templatenameOpt.rule]">
            <a-input v-model:value="detailData.mesTitle" placeholder="不超过25个字" show-count :maxlength="25" allow-clear />
          </a-form-item>
          <a-form-item :label="formOptions.signOpt.label" :rules="[formOptions.signOpt.rule]">
            <span>{{ detailData.mesCode }}</span>
          </a-form-item>

          <a-form-item :label="formOptions.descriptionOpt.label" :rules="[formOptions.descriptionOpt.rule]">
            <a-textarea style="position: relative;" v-model:value="detailData.remark" placeholder="不超过200个字" show-count
              :maxlength="200" />
          </a-form-item>
          <!-- 编辑弹窗的tab切换 -->
          <baseTabs @changeTabs="changeDetailTabs" :activeKey="editActiveKey" :tabsList="editTabsList" v-slot="{ item }">
            <a-form-item :label="formOptions.statusOpt.label" :rules="[formOptions.statusOpt.rule]">
              <a-switch size="small" v-model:checked="detailData.detailDetailItem.isOpen" />
            </a-form-item>
            <div v-show="item.key === 1">
              <a-form-item :label="formOptions.emailTitleOpt.label" :name="['detailDetailItem', 'mesTitle']"
                :rules="[formOptions.emailTitleOpt.rule]">
                <a-input v-model:value="detailData.detailDetailItem.mesTitle" placeholder="不超过25个字" show-count
                  :maxlength="25" allow-clear />
              </a-form-item>
              <a-form-item :label="formOptions.emailContextOpt.label" :name="['detailDetailItem', 'mesContent']"
                :rules="[formOptions.emailContextOpt.rule]">
                <a-textarea style="position: relative;" v-model:value="detailData.detailDetailItem.mesContent"
                  placeholder="不超过200个字" show-count :maxlength="200" />
              </a-form-item>
            </div>
            <div v-show="item.key === 2">
              <a-form-item :label="formOptions.msgOpt.label" :name="['detailDetailItem', 'tplName']"
                :rules="[formOptions.msgOpt.rule]">
                <a-select v-model:value="msgNameValue" placeholder="请选择" :options="msgOptions"></a-select>
                <a-select style="margin-top: 16px;" v-model:value="tplNameValue" placeholder="请选择"
                  :options="tplOptions"></a-select>
                <div style="font-size: 12px;margin-top:8px;color: #00000073;">若有需要请联系售后客服进行管理维护</div>
              </a-form-item>
            </div>
            <div v-show="item.key === 3">
              <a-form-item :label="formOptions.titleOpt.label" :name="['detailDetailItem', 'mesTitle']"
                :rules="[formOptions.titleOpt.rule]">
                <a-input v-model:value="detailData.detailDetailItem.mesTitle" placeholder="不超过25个字" show-count
                  :maxlength="25" allow-clear />
              </a-form-item>
              <a-form-item :label="formOptions.contextOpt.label" :name="['detailDetailItem', 'mesContent']"
                :rules="[formOptions.contextOpt.rule]">
                <a-textarea style="position: relative;" v-model:value="detailData.detailDetailItem.mesContent"
                  placeholder="不超过200个字" show-count :maxlength="200" />
              </a-form-item>
            </div>
          </baseTabs>
        </a-form>
      </div>
      <!-- 添加短信模板弹窗 -->
      <div v-show="isShowMsgModel">
        <a-form name="validate_other" ref="mesmdoelForm">
          <a-form-item :label="formOptions.msgOpt.label" :name="['detailDetailItem', 'tplName']"
            :rules="[formOptions.msgOpt.rule]">
            <a-select v-model:value="msgNameValue" placeholder="请选择" :options="msgOptions"></a-select>
            <a-select style="margin-top: 16px;" v-model:value="tplNameValue" placeholder="请选择"
              :options="tplOptions"></a-select>
            <div style="font-size: 12px;margin-top:8px;color: #00000073;">若有需要请联系售后客服进行管理维护</div>
          </a-form-item>
        </a-form>
      </div>
    </template>
  </baseModal>
</template>
<script lang="ts" setup>

import { ref, reactive, onMounted, nextTick, createVNode } from 'vue';
import baseTable from "@/components/table/baseTable.vue";
import tableToolTip from "@/components/table/tableToolTip.vue";
import columns from "@/components/table/tableConfig/columnsName";
import { getTableScroll } from "@/components/table/tableConfig/table";
import baseModal from "@/components/modal/baseModal.vue";
import baseTabs from "@/components/tabs/baseTabs.vue";
import baseTree from "@/components/tree/baseTree.vue";
import { getOptions_childs } from "@/utils/getRelationOptions"
import type { SelectProps, TreeProps } from 'ant-design-vue';
import request from '@/api/index'
import { scrollType, dataSourceType, detailDataType, configDataType, modeProp } from '@/type.d'
import msgModal from "@/components/modal/modelConfig/MsGModal"
import { Modal, message } from 'ant-design-vue';
import getters from "@/store/getters";
import {routerPerm} from '@/utils/common';
//data
const btnPerm = ref<any[]>([]);
const userInfo = getters.userInfo();
const formOptions = { //控制form表单子选项的集合
  templatenameOpt: {
    value: "",
    rule: {
      required: true,
      trigger: ["change", "blur"],
      message: "模版名称不能为空！",
    },
    label: '模板名称'
  },
  signOpt: {
    value: "",
    rule: {
      required: true,
      trigger: ["change", "blur"],
      message: "模板标识不能为空！",
    },
    label: '模板标识'
  },
  descriptionOpt: {
    value: "",
    rule: {
      required: false,
    },
    label: '模版描述'
  },
  statusOpt: {
    value: "",
    rule: {
      required: true,
      trigger: ["change", "blur"],
      message: "状态不能为空！",
    },
    label: '状态'
  },
  msgOpt: {
    value: "",
    rule: {
      required: false,
      trigger: ["change", "blur"],
      message: "短信模板不能为空！",
    },
    label: '短信模板'
  },
  emailTitleOpt: {
    value: "",
    rule: {
      required: true,
      trigger: ["change", "blur"],
      message: "邮件主题不能为空！",
    },
    label: '邮件主题'
  },
  titleOpt: {
    value: "",
    rule: {
      required: true,
      trigger: ["change", "blur"],
      message: "主题不能为空！",
    },
    label: '主题'
  },
  emailContextOpt: {
    value: "",
    rule: {
      required: true,
      trigger: ["change", "blur"],
      message: "邮件正文不能为空！",
    },
    label: '邮件正文'
  },
  contextOpt: {
    value: "",
    rule: {
      required: true,
      trigger: ["change", "blur"],
      message: "正文不能为空！",
    },
    label: '正文'
  },
}

const isShowPagination = true; // 是否需要配分页器
const childSiteList = ref<any[]>([])
const checkStrictly = ref<Boolean>(true); //树型节点选择不关联
//头部切换选项
const tabsList = [
  { tabName: "用户消息模板", key: 1 },
  { tabName: "管理员消息模版", key: 2 },
];

//对话框里面的编辑切换选项
const editTabsList = [
  { tabName: "邮件", key: 1 },
  { tabName: "短信", key: 2 },
  { tabName: "站内信", key: 3 },
];

const editActiveKey = ref<number>(1)

const reqTelListOption = ref({//控制分页数据请求的变量集合
  pageNumber: 1,
  pageSize: 10,
  tplType: 1
})
let selectId = ref(0) //编辑的选中id
const messageFrom = ref<any>("messageFrom");
const mesmdoelForm = ref<any>("mesmdoelForm");
//编辑项
let scroll: scrollType = reactive({ y: '', isFixed: false })
// let detailDetailItem = ref<dataSourceType>({ isOpen: true })
//消息模板集中数据
let configData = ref<configDataType>({ total: 0, size: 10, records: [] });

//消息模板详情
let detailData = ref<detailDataType>({ mesCode: '', mesTitle: '', remark: '', siteId: 0, tplType: 0, detailDtoList: [], detailDetailItem: [] })
// const dataList = ref(dataSource.value.slice(0, 10))
const modAlProps: modeProp = reactive({
  width: "M",
  title: "",
});
let selectable = ref(true);
let showSamePageBtn = ref(false); //检查同步到子站点按钮是否存在
const isVisible = ref(false); //控制是否展示编辑对话框
const isShowMsgModel = ref(false); //控制是否展示短信模板对话框

//树结构数据
const fieldNames = reactive<dataSourceType>({
  key: "id",
  title: "siteName",
  children: 'children'
});
let nowRecord = reactive({})
const selectedOrgKeys = ref<(string | number | any)[]>([])
const nowMsgType = ref<(any)>('')
const treeData = ref<any[]>([])
let isEdit = ref(false); //控制是否是编辑弹窗的变量
let msgNameValue = ref<string | undefined>(undefined)
let tplNameValue = ref<string | undefined>(undefined)
const msgOptions = ref<SelectProps['options']>([])
const tplOptions = ref<any[]>([])
const buttons = ref<dataSourceType[]>([]); //模态框button按钮个数和文案修改


//onmounted
onMounted(() => {
  btnPerm.value = routerPerm()
  fetchMessageTplList()
  fetchMessageTplSyncButton()
  fetchSiteManageTabledData()
});

//methods

// 选择组织
const checked_Keys = (obj: dataSourceType) => {
  let checkedNode = obj.e.node;
  let datas = JSON.parse(JSON.stringify(treeData.value));
  loops(datas, obj.checkedKeys.checked);
  selectedOrgKeys.value = obj.checkedKeys.checked;
  if (checkedNode && checkedNode.children) {
    selectedOrgKeys.value = loopChildren([checkedNode] || [], obj.e.checked);
  } else {
    selectedOrgKeys.value = obj.checkedKeys.checked;
  }
};
// 递归处理数据
const loops = (datalist: dataSourceType[] = [], ids: dataSourceType[] = []): any => {
  const loop1 = function (data: dataSourceType[]) {
    if (data instanceof Array && data.length) {
      for (var j = 0; j < ids.length; j++) {
        for (var i = 0; i < data.length; i++) {
          if (data[i].id == ids[j]) {
            data.splice(i, 1);
          } else {
            if (data[i].children instanceof Array && data[i].children.length) {
              loop1(data[i].children);
            }
          }
        }
      }
    }
  };
  return loop1(datalist);
};

//递归处理数据
const loopChildren = (datalist: dataSourceType[] = [], checked: Boolean): any => { // 父级选中，子级全选
  // 递归遍历处理数据
  if (!checked) return
  const record: (string | number)[] = [];
  const loop1 = function (data: dataSourceType[]) {
    if (data instanceof Array && data.length) {
      data.map((d) => {
        record.push(d.id);
        if (d.children instanceof Array && d.children.length) {
          loop1(d.children);
        }
      });
    }
  };
  loop1(datalist);
  return [...new Set(record)];
};

//获取同步的子站
const fetchSiteManageTabledData = async () => {
  const data = await request.fetchSiteManageTabledData()
  treeData.value.push(data)
}

//获取短信签名集合
const fethListPhoneSign = async () => {
  let msgList = await request.fethListPhoneSign()
  msgList.map((item: any) => {
    msgOptions.value?.push({ ...item, value: item.name })
  })
}

//获取手机模板集合
const fetchListPhoneTpl = async () => {
  let tplList = await request.fetchListPhoneTpl()
  tplList.map((item: any) => {
    tplOptions.value?.push({ ...item, value: item.name })
  })
}
//获取消息模板的分页列表数据展示
const fetchMessageTplList = async () => {
  const postData = {
    pageNumber: reqTelListOption.value.pageNumber,
    pageSize: reqTelListOption.value.pageSize,
    tplType: reqTelListOption.value.tplType,
  };
  const telData = await request.fetchMessageTplList(postData);
  let reqData = telData;
  let sourceData: dataSourceType;
  const records: any[] = [];
  reqData.records.map((item: any, index: number) => {
    sourceData = {
      ...item.middleDto,
      mesTitle: item.mesTitle,
      remark: item.remark,
      oparation: "编辑",
      num: index + 1,
      tplType: item.tplType,
      id: item.id,
      mesCode: item.mesCode,
    };
    records.push(sourceData);
  });
  configData.value.total = reqData.total;
  configData.value.size = reqData.size;
  configData.value.records = records;
  nextTick(() => {
    let { y, isFixed } = getTableScroll(74, "informationContent", 80)
    scroll.y = y;
    scroll.isFixed = isFixed;
  });
};

//获取模板详情
const fetchMessageTpl = async (id: number) => {
  const postData = { id }
  detailData.value = await request.fetchMessageTpl(postData)
  detailData.value.detailDetailItem = detailData.value.detailDtoList.find((item) => { return item.mesType === 2 })
  modAlProps.title = '编辑'
  buttons.value = [
    {
      text: "保存",
      "html-type": "submit",
      keepAlive: true,
    },
  ];
  isVisible.value = true
  isEdit.value = true
}

//改变头部tab切换
const changeTopTabs = (activeKey: number) => {
  reqTelListOption.value.tplType = activeKey;
  fetchMessageTplList();
};

//改变编辑弹窗的tab切换
const changeDetailTabs = (activeKey: number) => {
  editActiveKey.value = activeKey
  if (activeKey == 1) {
    detailData.value.detailDetailItem = detailData.value.detailDtoList.find(item => item.mesType == 2)
  } else if (activeKey == 2) {
    fethListPhoneSign()
    fetchListPhoneTpl()
    detailData.value.detailDetailItem = detailData.value.detailDtoList.find(item => item.mesType == 3)
  } else {
    if (detailData.value.detailDtoList.find(item => item.mesType == 1)) {
      detailData.value.detailDetailItem = detailData.value.detailDtoList.find(item => item.mesType == 1)
    } else {
      detailData.value.detailDetailItem = {}
    }
  }
};


//对话框的确定保存
const buttonMessage = async (e: any) => {
  if (isEdit.value) { //编辑项
    messageFrom.value
      .validate()
      .then(() => {
        isVisible.value = false;
        isShowMsgModel.value = false
        isEdit.value = false
        editActiveKey.value = 1
        fetchMessageTplUpdate()//修改模板
        messageFrom.value.resetFields();
      }).catch((err: any) => {
        console.log(err);
      });
  } else if (isShowMsgModel.value) {
    mesmdoelForm.value
      .validate()
      .then(() => {
        isVisible.value = false;
        isShowMsgModel.value = false
        isEdit.value = false
        editActiveKey.value = 1
        fetchDetailsStatusUpdate(nowRecord, nowMsgType.value)
        messageFrom.value.resetFields();
      }).catch(() => { });
  } else {
    fetchSyncChildSitTpl()
  }
}



//同步子站点消息模板
const fetchSyncChildSitTpl = async () => {
  const postData = {
    childSiteList: selectedOrgKeys.value,
    mobile: "",
    siteId: 0
  }
  await request.fetchSyncChildSitTpl(postData).then((res: any) => {
    if (res.code == "00000 00000") {
      message.success(res.message);

      isVisible.value = false
      editActiveKey.value = 1
    } else {
      message.error(res.message);
    }
  }).catch((err: any) => {
    throw new Error(err);
  });
}


//检查同步到子站点按钮是否存在
const fetchMessageTplSyncButton = async () => {
  await request.fetchMessageTplSyncButton().then((res: any) => {
    if (res) {
      showSamePageBtn.value = true
    }
  }).catch((err: any) => {
    throw new Error(err);
  });
}


//修改消息模板的详情
const fetchMessageTplUpdate = async () => {
  const postData = {
    id: selectId.value,
    mesTitle: detailData.value.mesTitle,
    remark: detailData.value.remark,
    updateDetailList: [detailData.value.detailDetailItem]
  }
  await request.fetchMessageTplUpdate(postData).then((res: any) => {
    if (res.code == "00000 00000") {
      message.success(res.message);
      fetchMessageTplList()
      isVisible.value = false
      editActiveKey.value = 1
    } else {
      message.error(res.message);
    }
  }).catch((err: any) => {
    throw new Error(err);
  });
}


//取消弹窗事件
const handleCancle = () => {
  isVisible.value = false;
  isShowMsgModel.value = false
  isEdit.value = false
  editActiveKey.value = 1
};


//打开同步模板到子站model
const showModel = () => {
  modAlProps.title = "同步模版到子站";
  isVisible.value = true;
  buttons.value = [
    {
      text: "保存",
      "html-type": "submit",
      keepAlive: true,
    },
  ];
};




//打开编辑框
const showText = (params: any) => {
  if(!btnPerm.value.includes('editAble')) return
  selectId.value = params.id
  editActiveKey.value = 1
  fetchMessageTpl(params.id)
};

//控制消息模板的短信、邮件、站内信的开关
const switchChange = async (record: dataSourceType, mesType: number) => {
  if (mesType === 3 && record.openSms) {
    await request.fetchSmsHavNumber().then((res: any) => {
      if (res) {
        nowRecord = record
        nowMsgType.value = mesType
        if (record?.smsVo?.tplId) {
          fetchDetailsStatusUpdate(record, mesType)
        } else {
          isShowMsgModel.value = true
          isVisible.value = true
        }
      } else {
        Modal.confirm(Object.assign({}, msgModal.confirm, {
          title: createVNode("p", { class: 'mode-title', style: { 'font-size': '14px', 'font-weight': '400' } }, ['短信信余量不足，请前往', createVNode("a", {}, '服务市场'), '充值后再开启！']),
          content: '',
          icon: createVNode("i", { class: "iconfont icon-warn warning_ICON", style: { 'font-size': '20px', 'color': '#FAAD14FF', 'position': 'absolute', 'top': '-4px' } }),
          okText: '我知道了',
          onOk() {
            fethListPhoneSign()
            fetchListPhoneTpl()
            // modAlProps.title = '绑定短信模版'
            record.openSms = record.openSms ? false : record.openSms
            isShowMsgModel.value = false
            isVisible.value = false
          },
          onCancel() {
            record.openSms = record.openSms ? false : record.openSms
            Modal.destroyAll();
          },
        },))
      }
    }).catch((err: any) => {

      throw new Error(err);
    });
  } else {
    fetchDetailsStatusUpdate(record, mesType)
  }
};

//短信、邮件、站内信功能开启|关闭
const fetchDetailsStatusUpdate = async (record: dataSourceType, mesType: number) => {
  const postData = {
    id: record.id,
    mesType,
    open:
      mesType === 1
        ? record.openLetter
        : mesType === 2
          ? record.openEmail
          : record.openSms,
    // tplDetails: {
    //   extendedField: "",
    //   mesConten: "",
    //   mesTitle: "",
    //   tplId: "",
    //   tplName: ""
    // }
  };
  await request.fetchDetailsStatusUpdate(postData).then((res: any) => {
    if (res.code == "00000 00000") {
      message.success(res.message);
      fetchMessageTplList();
    } else {
      message.error(res.message);
      if (mesType === 1) {
        record.openLetter = !record.openLetter
      } else if (mesType === 2) {
        record.openEmail = !record.openEmail
      } else {

      }
    }
  }).catch((err: any) => {
    throw new Error(err);
  });
}


// 获取分页的改变
const changePage = (data: { pageCurrent: any; pageSize: any }) => {

  let { pageCurrent, pageSize } = data;
  reqTelListOption.value.pageNumber = pageCurrent;
  reqTelListOption.value.pageSize = pageSize;
  fetchMessageTplList();
};

//computed



</script>

<style lang="less" scoped>
.informationContent {
  background-color: #fff;
  padding: 16px;
  height: calc(100% - 72px);
  overflow: hidden;
}

.edit-body {
  display: flex;
  flex-direction: column;

  .telEdit {
    display: flex;
    flex-direction: column;
  }

  .telName {
    width: 72px;
    text-align: right;
  }

  .telNameInput {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
  }

  .telSign {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 24px;
  }

  .telDecTextarea {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 24px;
  }

  .msgModel {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .editTabsContent {
    display: flex;
    flex-direction: column;

    .editStatus {
      display: flex;
      flex-direction: row;
      align-items: center;
    }
  }
}


.ant-tabs {
  overflow: inherit;
}

:deep(.ant-modal-wrap .msg-ant-modal .ant-modal-confirm-title) {
  font-size: 14px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.85);
}

:deep(.ant-modal-confirm-body .ant-modal-confirm-title) {
  font-size: 14px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.85);
}

:deep(.ant-modal-confirm .ant-modal-body) {
  padding: 2px 0 0 28px;
}

.select-text {
  margin-bottom: 16px;
  font-size: 14px;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.85);
}

.model-tips {
  height: 40px;
  background: #edf7ff;
  border-radius: 2px 2px 2px 2px;
  opacity: 1;
  border: 1px solid #9cccff;
  padding: 0px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;

  .icon-hint {
    color: var(--theme_button_bg_color, #1f6ded);
  }

  .tips-text {
    font-size: 14px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.85);
  }
}

:deep(.ant-form-item-label > label::after) {
  margin: 0;
  margin-right: 12px;
}

:deep(.ant-input-textarea-show-count::after) {
  position: absolute;
  right: 12px;
  bottom: 4px;
}


:deep(.ant-form-item .ant-input-textarea-show-count::after) {
  margin-bottom: 0;
}

:deep(.ant-table-thead>tr>th) {
  font-weight: 600;
}

:deep(.ant-tabs-tab) {
  padding: 0 0 10px 0;
}

:deep(.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn) {
  font-weight: 500;
  color: #000000;
}

:deep(.ant-tabs-content-holder) {
  margin-top: 16px;
}

:deep(.ant-form-item-label) {
  width: 84px;
}

.ant-table-wrapper {
  margin-top: 24px;
}

.ant-tabs-tabpane {
  display: flex;
  align-items: center;
}

::v-deep(.ant-table-wrapper) {
  margin-top: 16px;
}


::v-deep(.ant-table-wrapper table>thead>tr>th:nth-child(1)) {
  padding-left: 16px;
}

::v-deep(.ant-table-wrapper table > tbody > tr > td:nth-child(1)) {
  padding-left: 16px;
}
</style>
<style>
.ant-tooltip {
  max-width: 700px;
}
</style>
